<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <p style="float: left">Axlab 社区团购管理中心</p>
        <p style="float: right">
          
          <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" >
            <template #reference>
              <span style="margin-right: 20px">{{ result.username }}</span>
            </template>
          </van-popover>
          
          <img :src="result.img" alt="" width="40px" style="float: right;margin-top: 5px;">
        </p>
      </el-header>
      <el-container style="height: calc(100vh - 60px)">
        <el-aside width="200px" style="
            height: 100%;
            background-color: #fff;
            border: 1px solid rgb(220, 223, 230);
            box-sizing: border-box;
          ">
          <el-col :span="50">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
              <el-sub-menu v-for="item in list" :key="item" :index="item.Permissions_url">
                <template #title>
                  <el-icon>
                    <Histogram v-if="item.Permissions_name == '监控分析'"/>
                    <Document v-if="item.Permissions_name == '订单'"/>
                    <SuitcaseLine v-if="item.Permissions_name == '商品'"/>
                    <ChatDotRound v-if="item.Permissions_name == '内容'"/>
                    <Present v-if="item.Permissions_name == '运营'"/>
                    <User v-if="item.Permissions_name == '用户'"/>
                    <Setting v-if="item.Permissions_name == '系统'"/>
                  </el-icon>
                  <span>{{ item.Permissions_name }}</span>
                </template>
                <el-menu-item v-for="i in item.children"  :key="i"   :index="i.Permissions_url"  >{{ i.Permissions_name }}</el-menu-item> 
              </el-sub-menu>
              <!-- <el-sub-menu index="/text">
                <template #title>
                  <el-icon>
                    <Histogram />
                  </el-icon>
                  <span>监控分析</span>
                </template>
                <el-menu-item index="/index/yun">运营监控</el-menu-item>
                <el-menu-item index="/index/user">用户分析</el-menu-item>
                <el-menu-item index="/index/deal">交易分析</el-menu-item>
                <el-menu-item index="/index/shop">商品分析</el-menu-item>
              </el-sub-menu> -->

              <!-- <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <Document />
                  </el-icon>
                  <span>订单</span>
                </template>
                <el-menu-item index="/index/orderform">订单管理</el-menu-item>
                <el-menu-item index="/index/aftersale">售后管理</el-menu-item>
                <el-menu-item index="/index/delivergoods">发货管理</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <SuitcaseLine />
                  </el-icon>
                  <span>商品</span>
                </template>
                <el-menu-item index="/index/shoplist">商品管理</el-menu-item>
                <el-menu-item index="/index/shopinventory">库存记录</el-menu-item>
                <el-menu-item index="/index/shopcate">分类管理</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="4">
                <template #title>
                  <el-icon>
                    <ChatDotRound />
                  </el-icon>
                  <span>内容</span>
                </template>
                <el-menu-item index="1-2">专题管理</el-menu-item>
                <el-menu-item index="1-3">广告管理</el-menu-item>
                <el-menu-item index="1-4">平台资料</el-menu-item>
                <el-menu-item index="1-5">搜索热词</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="5">
                <template #title>
                  <el-icon>
                    <Present />
                  </el-icon>
                  <span>运营</span>
                </template>
                <el-menu-item index="1-1">秒杀</el-menu-item>
                <el-menu-item index="1-2">拼团</el-menu-item>
                <el-menu-item index="1-3">优惠卷</el-menu-item>
                <el-menu-item index="1-4">满减</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="6">
                <template #title>
                  <el-icon>
                    <User />
                  </el-icon>
                  <span>用户</span>
                </template>
                <el-menu-item index="1-1">用户管理</el-menu-item>
                <el-menu-item index="1-2">用户标签</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="8">
                <template #title>
                  <el-icon>
                    <Setting />
                  </el-icon>
                  <span>系统</span>
                </template>
                <el-menu-item index="/index/System">账号管理</el-menu-item>
                <el-menu-item index="/index/System1">角色管理</el-menu-item>
              </el-sub-menu> -->
            </el-menu>
          </el-col>
        </el-aside>
        <el-main style="padding: 10px; background-color: rgb(247, 247, 247)">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { showToast } from 'vant';
import {
  Document,
  Menu as IconMenu,
  Key,
  Location,
  Setting,
} from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const result = JSON.parse(localStorage.getItem('result'))
const showPopover = ref(false);
const list = ref([]);
const actions = [
      { text: '注销登录' },
    ];
const onSelect = (action) => {
  if(action.text === '注销登录'){
    localStorage.removeItem('result')
    localStorage.removeItem('token')
    ElMessage({
        message: '注销成功',
        type: 'success',
      })
    setTimeout(()=>{
      router.push('/login')
    },1000)
  }
}

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const getPermissions = async()=>{ 
  const {data} = await axios.get("http://localhost:3000/jsb/getPermissions?_id=" + result._id)
  list.value = data.info_list
  console.log('====================================');
  console.log(list.value);
  console.log('====================================');
}
onMounted(()=>{
  getPermissions()
})
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  // background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-bottom: #d3dce6 1px solid;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-main {
  // background-color: #E9EEF3;
  color: #333;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>